.help-card-title {
  font-size: var(--requestly-font-size-md);
  font-weight: var(--requestly-font-weight-medium);
  color: var(--requestly-color-text-default);
}

.help-card-link {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 1rem;
  cursor: pointer;
  width: fit-content;
  transition: 0.2s ease-in-out;
  color: var(--requestly-color-text-default);
  text-decoration-color: #ffffff00;
  font-size: var(--requestly-font-size-sm);

  & .help-card-link-icon,
  .help-card-react-icon {
    width: 20px;
    height: 20px;
  }

  & .help-card-link-title {
    color: var(--requestly-color-text-default);
  }

  &:hover {
    color: var(--requestly-color-text-default);
    text-decoration: underline;
    text-decoration-color: var(--requestly-color-text-default);
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
  }

  &:hover .help-card-react-icon {
    color: var(--requestly-color-text-default);
  }
}

.help-card-react-icon {
  align-self: center;
  position: relative;
  top: 3px;

  &:hover,
  &:focus {
    color: var(--requestly-color-text-default);
  }
}
